<template>
  <div class="app-container">
      <div class="ment-top">
        <span class="span-btn">
        <el-input
          v-model="filterTest"
          size="medium"
          style="width:140px;"
          class="ment-input ment-right"
          placeholder="图片类型"
          prefix-icon="el-icon-search"
        />
        <el-select
          v-model="value"
          size="medium"
          placeholder="请选择">
          <el-option
            style="width:200px"
            size="medium"
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button
          class="ment-left"
          size="medium"
          icon="el-icon-search"
          type="primary"
          @click="togind"
        >查找用户</el-button>
        <el-button
          class=""
          size="medium"
          icon="el-icon-refresh-right"
          type="warning"
          @click="adveremove"
        >清空</el-button>
        <el-button
          class=""
          size="medium"
          icon="el-icon-refresh-right"
          type="danger"
          :disabled="multipleSelection.length=== 0 ? true : false"
          @click="adverdelete"
        >批量删除</el-button>
        </span>
        <el-table
        ref="multipleTable"
        :data="finalist"
        size="medium"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="140"
        />
        <el-table-column
          prop="id"
          label="标题"
        />
        <el-table-column
          prop="name"
          label="图片URL"
        />
        <el-table-column
          prop="address"
          label="链接URL"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="类型"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="序列号"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          align="center"
          width="260">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="advertisingmodify(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteEdit(scope.$index, scope.row)"
            >删除</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="wacthpreview(scope.$index, scope.row)"
            >预览</el-button>
          </template>
        </el-table-column>
      </el-table>
        </div>
    <div>
      <el-dialog title="修改广告图信息" :visible.sync="advertisingVisible" class="dialogform">
        <el-form :model="advertising">
          <el-form-item >
            <label-wrap  class="dialog-item" >图片标题</label-wrap>
            <el-input v-model.lazy="advertising.title" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">图片描述</label-wrap>
            <el-input v-model.lazy="advertising.description" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item >
            <label-wrap  class="dialog-item">图片类型</label-wrap>
            <el-input v-model.lazy="advertising.type" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">跳转链接</label-wrap>
            <el-input v-model="advertising.link" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">排序</label-wrap>
            <el-input v-model="advertising.sorting" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">图片</label-wrap>
            <el-input v-model="advertising.Picture" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">略缩图片</label-wrap>
            <el-input v-model="advertising.Slightly" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">背景色</label-wrap>
            <el-input v-model="advertising.back" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="advertisingVisible = false">取 消</el-button>
          <el-button type="primary" @click="advertisingrmine">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";
import request from "@/utils/request";

export default {
  name: 'SelectExcel',
  data() {
    return {
      filterTest:'',
      value:'',
      disabled:true,
      advertisingVisible:false,
      multipleSelection: [],
      advertising:{
        title:'',
        description:'',
        type:'',
        link:'',
        sorting:'',
        Picture:'',
        Slightly:'',
        back:'',
      },
      options: [{
        value: '1',
        label: '1'
      }, {
        value: '2',
        label: '2'
      }, {
        value: '3',
        label: '3'
      }]
    }
  },
  created() {
    this.getfend()
  },
  computed:{
    ...mapState(['finalist']),
  },
  methods: {
    ...mapActions(['getfend']),

    //查找用户
    togind(){
      if (this.filterTest === ''){
        this.$message.error('请输入查找内容')
      }else {
        //this.fileFilter
      }
    },
    //清空
    adveremove(){

    },
    //批量删除
    handleSelectionChange(val){
      this.multipleSelection = val;
      //console.log(this.multipleSelection)
    },
    adverdelete(){
      this.$confirm('此操作将永久删除['+this.multipleSelection.length+']条数据，是否继续？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        let ids ='?'
        this.multipleSelection.forEach(item =>{
          ids += ids +item.id + '&'
        })
        request.delete('/delete'+ids).then((resp)=>{
          if (resp){
            this.$message({
              message: '删除成功!'
            })
            this.getfend()
          }
        }).catch(()=>{
          this.$message({
            message: '取消删除!'
          })
        })
      })

    },
    //删除
    deleteEdit(index,data){
      console.log(index, data)
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete('/delete', data.id).then((resp) => {
          if (resp) {
            this.$message({
              message: '删除成功!'
            })
            this.getfend()
          }
        })
      }).catch(() => {
        this.$message({
          message: '已取消删除'
        })
      })
    },
    //编辑
    advertisingmodify(index,data){
      this.advertising.title=data.username
      this.advertisingVisible =true
    },
    //编辑确定按钮
    advertisingrmine(){
      request.put('/update',this.advertising).then((resp)=>{
        if(resp){

        }
      })
      this.advertisingVisible =false
    },
    //预览
    wacthpreview(index,data){
    }
  }
}
</script>
<style>
.ment-right{
  margin-right: 10px;
}
.ment-top{
  margin-bottom: 15px;;
}
.span-btn {
  display: block;
  width:740px;
  margin-bottom: 10px;
}
.ment-left{
  margin-left: 10px;
}
.dialog-input{
  width: 80%;
  float: right;
}
.dialogform{
  width: 60%;
  margin: 0 auto;
}
.dialog-item{
  width: 18%;
}
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center !important;
}
</style>
